<!-- Created by mhy on 2018/6/27.

 -->
<template>

  <div class="frame-new-page" style="background-color: #F2F2F2">
    <div class="frame-header">
    </div>
    <div class="frame-content">
      <div class="frame-left">
        <div class="frame-left-dist" style="margin-bottom: 20px "></div>
        <m-select v-model="value1" :options="options1" title="状态" class="m-mb-10"/>
        <m-select v-model="value2" :options="options2" title="色系" class="m-mb-10"/>
        <m-select v-model="value4" :options="options4" title="付费类型" class="m-mb-10"/>
        <div class="frame-left-dist" style="margin-top: 20px"></div>
        <p class="frame-left-add-factory" v-show="factoryid.length>0" style="color: #303641">厂家id号：{{factoryid}}</p>
        <p class="frame-left-add-factory" v-show="factoryname.length>0" style="color: #303641">厂家名称：{{factoryname}}</p>
        <p class="frame-left-add-factory" v-show="seqid.length>0" style="color: #303641">厂家框条编号：{{seqid}}</p>
        <p class="frame-left-add-factory" @click="alertfactory">+{{seqid.length > 0 ? '修改' : '新增'}}关联厂家编号</p>
        <p class="frame-left-add-factory" v-show="seqid.length>0" @click="deletefactory" style="color: red">移除厂家信息</p>
        <button class="frame-left-operation" style="background-color: #39B866;color: white;" @click="save">发布</button>
        <button class="frame-left-operation" style="margin-top: 30px;background-color: #F8F8F8;border: #050505 solid 0.3pt;" @click="close">关闭</button>
      </div>
      <div class="frame-right">
        <div class="frame-right-header">
        </div>
        <div class="frame-right-dist"></div>
        <div class="last-img" >
          <div class="title-warning" style="height: 0;margin: 0">
            <p class="upload-img-title">*卡纸颜色或图片：{{inputcolor}}</p>
            <p class="warining-radious" ref="war1"></p>
          </div>
          <div class="frame-right-img-content">
            <img  src=""  ref="img1" class="img-show">
            <picture-input
              class="upload-wrapper"
              ref="pictureInput1"
              @change="onChange($event, 1)"
              accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,image/webp"
              :crop="false"
              size="2000">
            </picture-input>
            <p class="img-sign" ref="img-sign1" style="pointer-events: none">更换图片</p>
            <p class="img-color-sign"  @click="setcolorself">设置纯色</p>
          </div>
        </div>
        <div class="frame-right-mode" style="margin-top: 0px">
          <p class="frame-right-mode-title">*名称（必填）</p>
          <input class="frame-right-mode-input" maxlength="20" v-model="infoname" placeholder="请输入名称，20个字符以内">
        </div>
        <div class="frame-right-mode">
          <p class="frame-right-mode-title">*厚（cm）</p>
          <input class="frame-right-mode-input" v-model="height" placeholder="4位以内数字">
        </div>

        <div class="frame-right-footer">
        </div>
      </div>
    </div>
    <div v-show="bindfactory" class="bind-factory">
      <extra-alert class="factory-alert" infotype="卡纸" @submit-factory="bindedFactory" @close-factory="closefactory"/>
    </div>
    <div class="color-alert" v-show="showColorInput" >
      <input id="color-submit" @keyup.enter="submitcolor" class="color-input" placeholder="输入带#完整色值后按回车保存">
      <p class="cancel-color" @click="cancelcolor">取消</p>
    </div>
  </div>
</template>

<script>
  import PictureInput from '../../components/PictureInput.vue'
  import {mapActions,mapState} from 'vuex'

  export default {
    data() {
      return{
        inputcolor: '',
        showColorInput: false,
        value1: '0',
        value2: '0',
        value4: '0',
        options1:[{value: '1', label: '上架'},{value: '2', label: '下架'}],
        options2:[{value: '1', label: '红色'},{value: '2', label: '黄色'},{value: '3', label: '绿色'}],
        options4: [{value: '1', label: 'VIP'},{value: '2', label: '免费'}],

        infoname: '',
        height: '',

        imgUrlArray: [""],
        bindfactory: false,

        seqid: '',
        factoryid: '',
        factoryname: ''
      }
    },
    components: {
      PictureInput
    },
    mounted (){
      this.$store.state.navTitle = '卡纸信息'
    },
    methods: {
      ...mapActions([
          'uploadMatcard',
        'updateMatcard'
      ]),
      submitcolor(){
        let colorS =  document.getElementById('color-submit').value
        if (colorS.length >= 7 && colorS.length <= 9){
          var oSpan = document.createElement('p');
          oSpan.style.color = colorS
          if(oSpan.style.color != "") {
            this.imgUrlArray[0] = ''
            this.inputcolor = document.getElementById('color-submit').value
            let oFileInput = document.getElementsByClassName('upload-wrapper')[0]
            oFileInput.style.backgroundColor = this.inputcolor
            oFileInput.style.opacity = '1'
            this.showColorInput = false;
          } else {
            this.$dialog.toast({
              mes: '请输入十六进制合法色值！',
              timeout: 1000
            })
          }
        }else{
          this.$dialog.toast({
            mes: '请输入十六进制合法色值！',
            timeout: 1000
          })
        }

      },
      cancelcolor(){
        this.showColorInput = false;
      },
      setcolorself(){
        this.showColorInput = true;
      },
      onChange (rotate, i) {
        // rotate：拿到需旋转的角度,如果不需要旋转值为false
        // this.$refs.pictureInput.file拿到file对象
        let oFileInput = document.getElementsByClassName('upload-wrapper')[0]
        oFileInput.style.opacity = '0'
        oFileInput.style.backgroundColor = 'transparent'
        this.inputcolor = ''
        let self = this
        let oFile = this.$refs['pictureInput' + i]['file']
        // let imgCode = this.$refs['pictureInput' + i]['image']
        let oReader = new FileReader()
        oReader.readAsDataURL(oFile)
        oReader.onloadend = function () {
          let data = {}
          let img = document.createElement('img')
          img.onload = function () {
//            self.$store.state.uploadData.uploadImages[i] = ImageCompress.getBlobImage(this, 0.5, 1.0, rotate)
            /* // 测试：显示画布旋转后的图
             let imgShow1 = self.$refs['test']
             imgShow1.src = ImageCompress.getBlobImage(this, 0.5, 1.0, rotate) */
          }
          img.src = this.result
          // 显示样式图片到框内
          let imgShow = self.$refs['img' + i]
          imgShow.src = this.result
          imgShow.onload = function () {
//            if (imgShow.width > imgShow.height) {
//              imgShow.style.cssText = 'height: 100%'
//            } else {
              imgShow.style.cssText = 'width: 100%'
//            }
          }
//          self['show' + i] = false
        }
      },

      closefactory(){
        this.bindfactory = false
      },
      deletefactory(){
        this.factoryid = ''
        this.factoryname = ''
        this.seqid = ''
      },
      bindedFactory(text,val){
        if(text.length > 0 && val.length > 0){
          this.seqid = text
          let item = this.$store.state.factory.factoryOptionsData[val]
          this.factoryid = item.factoryid
          this.factoryname = item.factoryname
          this.bindfactory = false
        }else{
          this.$dialog.toast({
            mes:'请先填写必要信息',
            timeout: 1000
          })
        }
      },

      alertfactory(){
        this.bindfactory = true
      },

      save(){
          //验证信息
            let oFile = this.$refs['pictureInput1']['file']
            if(!oFile && this.inputcolor.length == 0){
              this.$dialog.toast({
                mes:'请先上传所有必需的图片或设置颜色（带*标识）',
                timeout: 1000
              })
              return
            }
        if(this.value1 == '0' || this.value2 == '0'  || this.value4 == '0'){
          this.$dialog.toast({
            mes:'请先选择左侧的重要选项',
            timeout: 1000
          })
          return
        }
        if(this.infoname.length == 0  || this.height.length == 0 ){
          this.$dialog.toast({
            mes:'请先填写必要信息',
            timeout: 1000
          })
          return
        }

        this.$dialog.loading.open('保存中，请稍后')
        if(!oFile){
          this.savenext()
          return
        }
        var form = new FormData();
        form.append('file', oFile);
        this.uploadMatcard(form)
          .then(data => {
          this.imgUrlArray[0] = data.result.url;
          this.imgid = data.result.id;
          console.log(this.imgUrlArray[0])
      })
      .then(data => {
          this.savenext()
      })
      .catch(err => {
          this.$dialog.loading.close()
        this.$dialog.toast({
          mes: '图片上传失败，请重新尝试',
          timeout: 1000
        })
      })

      },
      savenext(){
        let info = {
          imgurl: this.imgUrlArray[0],
          height: this.height,
          factoryname: this.factoryname,
          cardnum: 'JYU8990',
          customcolor: this.inputcolor
        }
        info = JSON.stringify(info);
//        info = JSON.stringify(info);
        return this.updateMatcard({
          action: 'add',
//          id: this.imgid,
          info: info,
          factory: this.factoryid,
          color: this.options2[Number(this.value2) - 1].label,
          name: this.infoname,
          state: this.options1[Number(this.value1) - 1].label,
          paytype: this.options4[Number(this.value4) - 1].label,
          createtime: Date.now(),
            seqnumber: this.seqid

        })
          .then(data => {
            this.$dialog.loading.close();
            this.$dialog.toast({
              mes: '卡纸保存成功',
              icon: 'success',
              timeout: 1000
            })
          })
          .catch(err => {
            this.$dialog.loading.close()
            this.$dialog.toast({
              mes: '保存失败，请重新尝试',
              timeout: 1000
            })
          })
      },
      close(){
          this.$router.go(-1);
      }
    },

  }
</script>

<style scoped>

  .color-alert{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    /*background-color: #02bb00;*/
    background-color: rgba(0,0,0,0.3);
  }
  input{
    background-color: white;
  }
  .color-input{
    width: 300px;
    height: 50px;
    margin-top: 300px;
    padding-left: 10px;
  }
  .cancel-color{
    width: 300px;
    height: 50px;
    margin-top: 30px;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
    background-color: #F2F2F2;
  }
  .img-color-sign{
    font-size: 12px;
    color: white;
    background-color: #39B866;
    position: absolute;
    right: 100px;
    bottom: 10px;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin:0;
  }
  .img-dist{
    width: 100%;
    height: 1px;
    background-color: #C8C8C9;
    margin-top: 18px;
  }
  .last-img{
    width: 90%;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .m-mb-10{
    margin-top: 10px;
  }
  .sub-img{
    width: 100% !important;
    height: 100px !important;
    margin-top: 10px !important;
  }
  .warining-radious{
    font-size: 12px;
    color: red;
    margin-left: 20px;
  }
  .img-info{
    font-size: 12px;
    color: #303641;
    margin-left: auto;
  }
  .img-mode{
    margin-top: 22px;
    margin-bottom: 19px;
  }
  .title-warning{
    /*width: 200%;*/
    display: flex;
    display: -webkit-flex;
    margin-top: 20px;
    height: 17px;
  }
  .img-aroud{
    width: 100%;
    padding-left: 10pt;
    padding-right: 10pt;
    height: 325px;
    background-color: white;
    border:1pt solid #C8C7CC;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    /*align-items: c;*/

  }
  .frame-right-img-size{
    width: 90%;
    height: 325px;
  }
  .upload-wrapper {
    width: 100%;
    height: 100%;
    /*background-color: aqua;*/
    position: absolute;
    left: 0;
    top: 0;
  }
  .frame-right-img-content{
    width: 350px;
    height: 350px;
    background-color: white;
    margin-top: 20pt;
    position: relative;
  }
  .img-show{
    left: 0;
    top:0;
    position: absolute;
    background-color: aqua;
  }
  .img-sign{
    font-size: 12px;
    color: white;
    background-color: #39B866;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin:0;
  }

  .upload-img-title{
    font-size: 12px;

  }
  .frame-right-radious{
    width: 350px;
    height: 377px;
    /*display: flex;*/
    /*display: -webkit-flex;*/
    /*justify-content: space-between;*/
  }

  .frame-right-img-sep{
    width: 90%;
    margin-top: 30px;
    height: 377px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }

  body{
    background-color: #F2F2F2;
  }
  /*顶部*/
  .frame-header{
    width: 100%;
    height: 100px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }

  /*内容*/
  .frame-content{
    width:100%;
    display: flex;
    display: -webkit-flex;
  }
  /*左边*/
  .frame-left{
    width: 30%;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .frame-left-add-factory{
    color: #39B866;
    font-size: 12px;
    align-self: flex-start;
    margin-top: 20px;
    margin-left: 10%;
  }
  .frame-left-operation{
    font-size: 16px;
    width: 80%;
    height: 50px;
    border-radius: 3pt;
    border:0;
    margin-top: 50px;
  }

  input::-ms-input-placeholder{
    text-align: left;
  }
  input::-webkit-input-placeholder{
    text-align: left;
  }
  .frame-left-dist{
    width: 80%;
    background-color: #C8C8C9;
    height: 1px;
  }

  .frame-left-category{
    margin:5pt;
    width: 80%;
    height: 25pt;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1pt;
    border-color: #C8C8C8;
  }
  .category-title{
    margin-left: 10pt;
    font-size: 7pt;
    color: #303641;
  }
  .category-value{
    margin-right: 10pt;
    font-size: 7pt;
  }

  /*右边*/
  .frame-right{
    width: 70%;
    height: 800px;
    /*background-color: white;*/
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .frame-right-mode{
    width: 90%;
    height: 77px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 0px;
    margin-top: 30px;
  }

  .frame-right-mode-title{
    color: #303641;
    font-size: 12px;
    /*margin-top: 22px;*/
    /*margin-bottom: 19px;*/
  }
  .frame-right-mode-input{
    width: 100%;
    height: 50px;
    text-align: left;
    padding-left: 10pt;
    border: 1px solid #C8C7CC;
    line-height: 30pt;
    font-size: 14px;
  }

  .frame-right-dist{
    width: 90%;
    height: 1px;
    margin-top: 0px;
    padding-bottom: 30px;
    padding: 0;
    background-color: #C8C8C9;
  }

  .frame-right-header{
    height:0px;
    width: 90%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: row;
  }

  .frame-right-footer{
    width: 90%;
    height: 40pt;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }



</style>
